<template>
  <div>
    <div style="display: flex; align-items: center">
      <div class="phone-title" style="width: 100px">
        <h3 style="margin-top: 39px; margin-left: 32px; width: 80px">
          服务情况
        </h3>
      </div>

      <div style="margin-top: 39px" class="phone-back">
        <button @click="handleSend" class="blackButton">
          <img src="@/assets/order/Left.png" alt="返回" style="width: 16px; height: 16px; margin-right: 4px" />
          返回服务列表
        </button>
      </div>
    </div>

    <div>
      <div class="order-name">{{ this.$route.query.orderName }}</div>
    </div>

    <div class="order-tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="申请人员" name="first">
          <div style="margin-top: 16px">
            <el-table :data="orderData" fit class="tableAuto" tableLayout="auto">
              <el-table-column label="用户编号" prop="userId"></el-table-column>
              <el-table-column label="用户昵称" prop="nickName"></el-table-column>
              <el-table-column label="服务标题" prop="title"></el-table-column>
              <el-table-column label="申请时间" prop="applyTime"></el-table-column>
              <el-table-column label="开始时间" prop="beginTime"></el-table-column>
              <el-table-column label="结束时间" prop="endTime"></el-table-column>
              <el-table-column label="地址" prop="place"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div style="margin-top: 40px">
      <el-pagination style="text-align: right; margin-top: 20px" @current-change="handleSizeChange" :current-page.sync="pageNo" :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>

  </div>
</template>

<script>
import {
  getMissionHistoryPage,
} from "@/api/order";
export default {
  name: "Details",
  data() {
    return {
      activeName: "first",
      orderData: [],
      orderDialog: false,
      executedData: [],
      rejectOrderDialog: false,
      reason: "",
      executedDialog: false,
      userNos: [],
      userNo: "",
      cancelExecutedDialog: false,
      reviewedData: [],
      reviewedDialog: false,
      rejectReviewedDialog: false,
      reviewReason: "",
      settledData: [],
      settledDialog: false,
      bonus: null,
      completedData: [],
      id: null,
      pageSize: 10,
      pageNo: 1,
      total: 0,
      param: {
        missionId: null,
        status: null,
      },
      activities: [],
      checked: false,
      score: null,
      loading: false,
      isBlock: false,
      deliverables: ""
    };
  },
  created() {
    this.id = localStorage.getItem("id");
    if (!this.id) {
      this.id = this.$route.query.data;
      localStorage.setItem("id", this.id);
    }
    this.fetchOrderData();
  },
  methods: {
    handleSizeChange(e) {
      this.pageNo = e;
      this.getMissionPage();
    },
    handleClose(done) {
      done();
    },
    handleClick(tab) {
      if (tab.name === "first") {
        this.fetchOrderData();
      }
    },
    handleSend() {
      this.$router.push({ name: "Order" });
    },
    fetchOrderData() {
      const requestParam = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        param: {
          id: this.$route.query.data
        },
      };
      getMissionHistoryPage(requestParam).then((res) => {
        if (res) {
          this.orderData = res.list;
          this.total = res.count;
        }
      });
    },
  }
};
</script>

<style scoped>
@media (max-width: 768px) {
  .phone-title {
    h3 {
      width: 80px !important;
    }
  }
  .phone-back {
    margin-left: 100px !important;
  }
  ::v-deep .el-dialog {
    width: 100vw !important;
  }
  ::v-deep .el-input .el-input__inner {
    width: 100% !important;
  }
  .executed-span {
    width: 90% !important;
  }
  .settled-input-number {
    width: 60% !important;
  }
}

.blackButton {
  width: 136px;
  height: 40px;
  /* margin-left: 1405px; */
  background: #eeeeee;
  border-radius: 4px;
  border: none;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 32px;
  top: 26px;
}
.rejectStyle {
  color: red;
}
/* 结算 */
.input-number-disable {
  opacity: 50%;
}
::v-deep .el-checkbox__inner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #8157d9;
}

::v-deep .el-checkbox.is-checked .el-checkbox__label {
  color: #8157d9; /* 更改为你想要的颜色 */
}
.settled-input-number {
  width: 232px;
  height: 40px;
  border-radius: 4px;
  margin-left: 24px;
  padding: 16px;
  border: 1px solid #eeeeee;
}
.settled-input {
  margin-top: 24px;
  margin-left: 32px;
  align-items: center;
}
.settled-span {
  margin-left: 32px;
  span {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 24px;
  }
}
/* 撤销 */
.executed-span {
  width: 488px;
  margin-left: 32px;
  span {
    font-family: PingFang SC, PingFang SC;
  }
}
/* 转单 */
.executed-container {
  margin-left: 32px;
  span {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }
}
/* 按钮 */
.dialog-footer {
  margin-right: 32px;
}
.button {
  width: 60px;
  height: 30px;
  background-color: #8157d9;
  border-radius: 4px;
  color: #ffffff;
  border: none;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
.cancel {
  width: 60px;
  height: 30px;
  border: none;
  background-color: #eeeeee;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  border-radius: 4px;
  margin-left: 8px;
  cursor: pointer;
}
/* 同意 */
.order-span {
  margin-left: 32px;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin-top: 20px;
}
::v-deep .el-dialog__title {
  color: #333333;
  font-size: 16px;
  font-weight: bold;
  font-family: PingFang SC, PingFang SC;
  margin-left: 32px;
}
::v-deep .el-dialog__header {
  padding-top: 32px;
  padding-bottom: 10px;
}
::v-deep .el-input .el-input__inner {
  width: 390px; /* 修改输入框宽度 */
  height: 40px; /* 修改输入框高度 */
  margin-left: 8px;
}
/* 待派单-拒绝 */

textarea:focus {
  outline: none;
  box-shadow: none;
}
input:focus {
  outline: none;
  box-shadow: none;
}
.textarea-container {
  display: flex;
  justify-content: center;
}
.order_reason {
  padding: 16px;
  border-radius: 4px;
  width: 464px;
  height: 128px;
  margin-left: 32px;
  margin-right: 32px;
}
/* 交付日志 */
.logsCle {
  border: none;
  cursor: pointer;
  margin-top: -8px;
}
.logsImg {
  width: 12px;
  height: 12px;
  margin-left: -12px;
}
/* 标签页 */
.order-tab {
  margin-top: 48px;
}

/* 订单名称 */
.order-name {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  margin-top: 32px;
  margin-left: 32px;
}
/* dialog圆角 */
::v-deep .el-dialog__wrapper .el-dialog {
  border-radius: 8px;
}
</style>

<style>
.el-tabs__item.is-active {
  /* 例如，改变激活状态下的文字颜色 */
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  line-height: 16px;
}
.el-tabs__item {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #666666;
  line-height: 16px;
  font-style: normal;
  text-transform: none;
  padding: 0px;
  width: 184px;
  text-align: center;
}
.el-tabs__active-bar {
  background-color: rgba(0, 0, 0, 0);
}
.el-tabs__item.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 184px;
  height: 3px;
  background-color: #8157d9;
}

.el-table th > .cell {
  padding-left: 32px;
}
.el-table .cell {
  padding-left: 32px;
}
</style>
